<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>购物网页</title>  
        <style></style>
		<link rel="stylesheet" type="text/css" href="css/homepage.css"/>
		<link rel="stylesheet" type="text/css" href="css/popDrag.css"/>
		<script src="js/vue.js"></script>
		<script src="js/PopDrag.js"></script>
		<script src="js/jquery.min.js"></script>
		<script language =javascript >
			var i=0;
			var arr=new Array();
			arr[0]="/img/l1.jpg";
			arr[1]="/img/l2.jpg";
			arr[2]="/img/l3.jpg";
			arr[3]="/img/l4.jpg";
			function slide_photos()
			{
				var photo=document.getElementById("slide_photo");
				if (i==arr.length-1) 
				{
					i=0;
				}
				else
				{
					i+=1;
				}
				photo.src=arr[i];
			}
			setInterval("slide_photos()",2000);
			
		</script>
		
		<script th:inline="javascript">
			var userno = [[${userno}]];
			function s(){
				if(userno != null){
					sessionStorage.setItem("userno", userno);
					var obj = document.getElementById("l1");
					obj.style.visibility="hidden";
					var obj2 = document.getElementById("l2");
					obj2.style.visibility="visible";
				}else{
					var obj = document.getElementById("l1");
					obj.style.visibility="visible";
					var obj2 = document.getElementById("l2");
					obj2.style.visibility="hidden";
				}
			}
		</script>
    </head>
    <body onload="s()">
		<div class="div0">
			<div class="div1">
				<div class="logo">
					<a href="/index.html"></a>
				</div>
				<div class="welcome">
					<h>欢迎光临</h>
				</div>
				<div class="login" id="l1">
					<a href="loginu.html">用户登录</a>&nbsp
					<a href="logins.html">管理员登录</a>&nbsp
					<a href="register.html">用户注册</a>
				</div>
				<div class="loginok" id="l2">
					<h>欢迎光临,</h><h th:text="${userno}" style="color: red"></h>
				</div>
			</div>
		</div>
		<div class="div2">
			<div class="daohang">
				<li class="d1"><a href="">家用电器</a></li>
				<li class="d1"><a href="">生活用品</a></li>
				<li class="d1"><a href="">食品</a></li>
				<li class="d1"><a href="">数码产品</a></li>
				<li class="d1"><a href="">体育用品</a></li>
				<li class="d1"><a href="">化妆品</a></li>
			</div>
			<div class="photo">
				<img src="/img/l1.jpg" id="slide_photo" style="height: 390px; width: 780px;">
			</div>
		</div>
		<div class="main">
			<div class="container1">
				<p class="p1" id="view1">家用电器</p>
				<div class="container">
					<div class="right">
						<ul>
							<li th:each="commodities1:${commodities1}" class="li1">
								<a th:href="@{'/commodity/'+${commodities1.commodityno}}"><img th:src="@{${commodities1.pic}}"/></a>
								<p style="line-height: 8px;">&nbsp;</p>
								<a th:text="${commodities1.commodityname}" href="success-cart.html" target="_blank"></a>
								<h3 th:text="￥ + ${commodities1.price}"></h3>
								<h5 th:text="库存 + ${commodities1.stock} + 件"></h5>
							</li>
						</ul>
					</div>
				</div>	
			</div>
			
			
			<div class="container1">
				<p class="p1" id="view2">生活用品</p>
				<div class="container">
					<div class="right">
						<ul>
							<li th:each="commodities2:${commodities2}" class="li1">
								<a th:href="@{'/commodity/'+${commodities2.commodityno}}"><img th:src="@{${commodities2.pic}}"/></a>
								<p style="line-height: 8px;">&nbsp;</p>
								<a th:text="${commodities2.commodityname}" href="success-cart.html" target="_blank"></a>
								<h3 th:text="￥ + ${commodities2.price}"></h3>
								<h5 th:text="库存 + ${commodities2.stock} + 件"></h5>
							</li>
						</ul>
					</div>
				</div>	
			</div>
			
			<div class="container1">
				<p class="p1" id="view3">食品</p>
				<div class="container">
					<div class="right">
						<ul>
							<li th:each="commodities3:${commodities3}" class="li1">
								<a th:href="@{'/commodity/'+${commodities3.commodityno}}"><img th:src="@{${commodities3.pic}}"/></a>
								<p style="line-height: 8px;">&nbsp;</p>
								<a th:text="${commodities3.commodityname}" href="success-cart.html" target="_blank"></a>
								<h3 th:text="￥ + ${commodities3.price}"></h3>
								<h5 th:text="库存 + ${commodities3.stock} + 件"></h5>
							</li>	
						</ul>
					</div>
				</div>	
			</div>

			<div class="container1">
				<p class="p1" id="view4">数码产品</p>
				<div class="container">
					<div class="right">
						<ul>
							<li th:each="commodities4:${commodities4}" class="li1">
								<a th:href="@{'/commodity/'+${commodities4.commodityno}}"><img th:src="@{${commodities4.pic}}"/></a>
								<p style="line-height: 8px;">&nbsp;</p>
								<a th:text="${commodities4.commodityname}" href="success-cart.html" target="_blank"></a>
								<h3 th:text="￥ + ${commodities4.price}"></h3>
								<h5 th:text="库存 + ${commodities4.stock} + 件"></h5>
							</li>
						</ul>
					</div>
				</div>
			</div>

			<div class="container1">
				<p class="p1" id="view5">体育用品</p>
				<div class="container">
					<div class="right">
						<ul>
							<li th:each="commodities5:${commodities5}" class="li1">
								<a th:href="@{'/commodity/'+${commodities5.commodityno}}"><img th:src="@{${commodities5.pic}}"/></a>
								<p style="line-height: 8px;">&nbsp;</p>
								<a th:text="${commodities5.commodityname}" href="success-cart.html" target="_blank"></a>
								<h3 th:text="￥ + ${commodities5.price}"></h3>
								<h5 th:text="库存 + ${commodities5.stock} + 件"></h5>
							</li>
						</ul>
					</div>
				</div>
			</div>

			<div class="container1">
				<p class="p1" id="view6">化妆品</p>
				<div class="container">
					<div class="right">
						<ul>
							<li th:each="commodities6:${commodities6}" class="li1">
								<a th:href="@{'/commodity/'+${commodities6.commodityno}}"><img th:src="@{${commodities6.pic}}"/></a>
								<p style="line-height: 8px;">&nbsp;</p>
								<a th:text="${commodities6.commodityname}" href="success-cart.html" target="_blank"></a>
								<h3 th:text="￥ + ${commodities6.price}"></h3>
								<h5 th:text="库存 + ${commodities6.stock} + 件"></h5>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
    </body>
</html>

